<!-- BEGIN PAGE HEADING ROW -->
<div class="row">
	<div class="col-lg-12">
		<!-- BEGIN BREADCRUMB -->
		<div class="breadcrumbs">
			<ul class="breadcrumb">
				<li> <a href="<?= $this->webroot.'admin' ?>">Trang chủ</a> </li>
				<li class="active">Bản Đồ</li>
			</ul>
		</div>
		<!-- END BREADCRUMB -->

		<div class="page-header">
			<h1>Bản Đồ</h1>
		</div>

		<?php echo $this->element('layout/layout-options')?>

	</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<!-- END PAGE HEADING ROW -->


<div class="row">
	<div class="col-lg-12">

		<div id="map"> </div>


	</div><!-- /.col-lg-12 -->
</div><!-- /.row -->


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<?php
	echo $this->Html->css('admin');
	echo $this->Html->script('plugins/bootbox/bootbox.min');
	echo $this->Html->script('functions');
	echo $this->Html->script('gmaps');
?>


<script>
var map;
var lat = <?= $map['lat'] ?>;
var lng = <?= $map['lng'] ?>;

$( document ).ready(function($) {

	var path = [ [lat,lng] ];

	map = new GMaps({
        el: '#map',
        zoom: 16,
        lat: lat,
        lng: lng
	});

	polygon = map.drawPolygon({
        paths: path,
        strokeColor: '#BBD8E9',
        strokeOpacity: 1,
        strokeWeight: 3,
        fillColor: '#BBD8E9',
        fillOpacity: 0.6
	});

	map.addMarker({
        lat: lat,
        lng: lng,
        title: 'phuc',
		draggable: true,
		fences: [polygon],
		outside: function(m, f){
			postAjax($webroot + 'admin/contacts/location', {lat: m.position.k, lng: m.position.B}, function(resp){});
        }
	});

});

</script>
